<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/infoStyle.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <style>
        body{
            background-image: url("images/jmu.jpg");
        }

        .top {
            width: 100%;
            height: 50px;
            background-color: #1e8bc0;
        }

        .top-r {
            width: 250px;
            height: 50px;
            float: right;
            margin-top: -40px;
            /* border: 1px solid black; */
        }
        .top-r input {
            line-height: 40px;
            font-size: 20px;
            width: 100px;
            height: 40px;
            margin: 5px;
        }

        .top-r input:hover {
            color: #1e8bc0;
            background-color: #eceff5;
        }

        .main {
            width: 100%;
            height: 900px;

        }

        .nav {
            padding: 20px 0;
            line-height: 50px;
            text-align: center;
            width: 100%;
            height: 50px;
            /* border: 1px solid black; */
        }
        .nav #textId {
            width: 400px;
            height: 30px;
        }
        .nav #n1 {
            width: 400px;
            height: 30px;
            border-radius: 15px;
        }

        .nav #n2 {
            width: 50px;
            height: 35px;
        }
        .nav #n3 {
            width: 50px;
            height: 35px;
        }
        #tit{
            font-size: 30px;
            margin-left: 200px;
        }
        a{
            text-decoration-line: none;
            color: #000;
        }
    </style>
    <script>
        $(function () {
            requestData(1);
            $('#page').bind('keypress',function(event){
                if(event.keyCode == "13")
                {
                    var page=$("#page").val();
                    if(page>=1&&page<=pages)
                    {
                        requestData(page);
                    }
                }
            });

            $("#textId").keyup(function () {
                var content=$(this).val();
                if(content==""){
                    return;
                }

                searchDate(pageNum,content);
            });
        });

        function requestData(page) {

            $.post("${pageContext.request.contextPath}/news/ajaxNewsInfo",{index:page},function (data) {
                //当前页
                pageNum = data.pageNum;

                // //每页的数量
                var pageSize=data.pageSize;

                // //当前页的数量
                var size=data.size;

                // //总记录数
                var total = data.total;
                $('#total').text(total);
                // //总页数
                pages = data.pages;
                $('#pages').text(pages);
                // //结果集 size就是list的长度
                var list=data.list;
                showTable(list,size);
            },"json")
        }
        function showTable(list,size) {
            $('#tb').empty();
            for(var i=0;i<size;i++){
                var s;
                var a='<a href="#" onclick="click1('+list[i].id+')">'+list[i].title+'</a>';
                s='<tr><td style="font-size: 18px;font-weight:bold;">'+a+'</td><td rowspan="2" > ' +list[i].releaseDate+'</td></tr>';
                s=s+'<tr><td style="font-size: 12px;font-weight:lighter">'+list[i].summaryInfo+'</td></tr>';
                $("#tb").append(s);
            }
            $("#page").val(pageNum);
        }
        function pageclick1() {
            requestData(1);
        }

        function pageclick2() {
            if(pageNum!=1){
                requestData(pageNum-1);
            }
        }
        function pageclick3() {
            if(pageNum!=pages){
                requestData(pageNum+1);
            }
        }
        function pageclick4() {
            requestData(pages);
        }
        function click1(id) {
            window.open("${pageContext.request.contextPath}/news/news?id="+id);
        }
        function search(){
            var string =$("#textId").val();
            if(!(string==null||string=="")){
                searchDate(pageNum,string);
            }

        }
        function refreshBtn() {
            $('#textId').val("");
            requestData(1);
        }
        //搜索按钮
        function searchDate(page,string) {

            $.post("${pageContext.request.contextPath}/news/findByKeyword",{key:string,index:page},function (data) {
                //当前页
                pageNum = data.pageNum;

                // //每页的数量
                var pageSize=data.pageSize;

                // //当前页的数量
                var size=data.size;

                // //总记录数
                var total = data.total;
                $('#total').text(total);
                // //总页数
                pages = data.pages;
                $('#pages').text(pages);
                // //结果集 size就是list的长度
                var list=data.list;

                $("#textId").val(string);
                showTable(list,size);
            },"json")
        }
    </script>
</head>

<body >

<div class="top">
    <div id="tit">集美之窗</div>
    <div class="top-r">
        <div class="sel">
            <a href="${pageContext.request.contextPath}/admin_login.jsp"> <input type="submit" value="登 &nbsp;&nbsp;&nbsp; 陆" ></a>
        </div>
    </div>
</div>
<div class="main">
    <div class="nav">
        搜索：<input type="text" id="textId">&nbsp;<input type="button" id="n2" value="搜索" onclick="search()">
        <input type="button" id="n3" value="刷新" onclick="refreshBtn()">
    </div>
    <div class="div">
        <br>
        <table class="table" align="center" width="100%" id="tb">

        </table>
        <div style="float: left;margin-top: 20px">
            总计 <label id="total" style="font-size: 16px"></label>&nbsp;&nbsp;条&nbsp;&nbsp;共
            <label id="pages" style="font-size: 16px"></label> 页
        </div>
        <div  style="float:right;margin-top: 20px ">
            <button type="button" class="btn btn-default" onclick="pageclick1()">首页</button>
            <button type="button" class="btn btn-default" onclick="pageclick2()">上一页</button>
            page <input type="text" style="width:50px" id="page"/>
            <button type="button" class="btn btn-default" onclick="pageclick3()">下一页</button>
            <button type="button" class="btn btn-default" onclick="pageclick4()">尾页</button>
        </div>
    </div>
</div>
</body>
</html>